<template>
  <div class="profile-container">
    <!-- 左侧边栏 -->
    <div class="sidebar">
     <!-- 优化用户信息卡片样式 -->
      <div class="user-card">
        <el-upload class="avatar-uploader">
          <CoverUpload
            v-model="userInfo.avatar"
            :width="150"
            :height="150"
            :type="2"
          ></CoverUpload>
        </el-upload>
        <h2 class="username">{{ userInfo.username }}</h2>
        <p class="bio">{{ userInfo.bio || '这个人很懒，什么都没留下' }}</p>
        <div class="user-meta">
          <div class="meta-item">
            <label>邮箱：</label>
            <span>{{ userInfo.email || '未设置' }}</span>
          </div>
          <div class="meta-item">
            <label>电话：</label>
            <span>{{ userInfo.phone || '未设置' }}</span>
          </div>
          <div class="meta-item">
            <label>性别：</label>
            <span>{{ userInfo.gender==0?'女':'男' || '未设置' }}</span>
          </div>

          <div class="meta-item">
            <label>注册时间：</label>
            <span>{{ userInfo.createTime || '未设置' }}</span>
          </div>
        </div>
        <el-button  style="margin-top: 10px;" type="primary" plain @click="showEdit">
          编辑资料
        </el-button>
        <el-button  style="margin-top: 10px;" type="primary" plain @click="saveImage">
          保存头像
        </el-button>
      </div>
      <UserInfoEdit ref="userEditRef" @reload="loadUserInfo"></UserInfoEdit>
      <ShareEdit ref="shareEditRef" @reload="loadPostInfo"></ShareEdit>

      <!-- 导航菜单 -->
      <el-menu
        :default-active="activeTab"
        class="nav-menu"
        @select="handleMenuSelect"
      >
        <el-menu-item index="posts">
          <el-icon><Document /></el-icon>
          <span>我的文章 </span>
        </el-menu-item>
        <el-menu-item index="appointments">
          <el-icon><Timer /></el-icon>
          <span>我的预约</span>
        </el-menu-item>
        <el-menu-item index="notice">
          <el-icon><Notification /></el-icon>
          <span>我的消息</span>
        </el-menu-item>

        <el-menu-item index="group">
          <el-icon><ChatDotRound /></el-icon>
          <span>我的小组</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 右侧内容 -->
    <div class="main-content">
      <!-- 动态内容 -->
      <component :is="currentComponent" />
    </div>
  </div>
</template>

<script setup>
import {
        Document,
        Timer,
        Notification,
        ChatDotRound,
        Edit } from '@element-plus/icons-vue'
import UserPosts from './UserPosts.vue'
import UserAppointments from './UserAppointments.vue'
import UserGroup from "./UserGroup.vue";
import { useRouter,useRoute } from 'vue-router'
import { ref,shallowRef, reactive, getCurrentInstance, nextTick } from "vue"
const { proxy } = getCurrentInstance();
import UserInfoEdit from "./UserEdit.vue"
import ShareEdit from '../post/ShareEdit.vue'
import UserNotice from "./UserNotice.vue"
const router=useRouter();
const route=useRoute();



const activeTab = ref('posts')
const currentComponent = shallowRef(UserPosts)


// 用户信息示例
const userInfo = ref({
  userId:1,
  avatar: 'https://example.com/avatar.jpg',
  nickname: '心理咨询师张伟',

})

const loadUserInfo = async () => {
  let result = await proxy.Request({
    url: "/getUserInfo",

  });
  if (!result) {
    return;
  }
  userInfo.value=result.data;
};
loadUserInfo();






// 切换菜单
const handleMenuSelect = (index) => {
  activeTab.value = index
  const components = {
    posts: UserPosts,
    appointments: UserAppointments,
    notice: UserNotice,
    group:UserGroup
  }
  currentComponent.value = components[index]
}




const userEditRef=ref({});
const showEdit=()=>{
  userEditRef.value.showEdit(userInfo.value);
}

// 保存头像
const saveImage=async()=>{
  let result = await proxy.Request({
    url: "/saveImage",
    params:{
      avatar:userInfo.value.avatar
    }
  });
  if (!result) {
    return;
  }
  proxy.Message.success("保存成功");
}

const  shareEditRef=ref();
const showShareEdit=(data)=>{
  shareEditRef.value.showEdit(data);
}


</script>

<style scoped lang="scss">
.profile-container {
  display: flex;
  max-width: 1200px;
  margin: 20px auto;
  gap: 20px;

  .sidebar {
    width: 280px;
    flex-shrink: 0;

    .user-card {
      padding: 20px;
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
      border-radius: 8px;
      text-align: center;

      .avatar-uploader {
        margin-bottom: 15px;
        position: relative;

        .edit-tip {
          position: absolute;
          bottom: -20px;
          left: 50%;
          transform: translateX(-50%);
          font-size: 12px;
          color: #666;
        }
      }

      .username {
        margin: 15px 0;
        color: #333;
      }

      .bio {
        color: #666;
        font-size: 14px;
        line-height: 1.5;
        min-height: 60px;
      }
    }

    .nav-menu {
      margin-top: 20px;
      border-right: none;

      :deep(.el-menu-item) {
        height: 50px;
        line-height: 50px;
        margin: 5px 0;
        border-radius: 6px;

        &.is-active {
          background-color: #f0f7ff;
          color: #409EFF;
        }
      }
    }
  }

  .main-content {
    flex: 1;

    .action-bar {
      margin-bottom: 20px;
      padding: 15px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
  }
}
</style>